<template>
    <div class="context">
        <div class="left">
            <LeftView></LeftView>
        </div>
        <div class="middle">
            <MiddleView></MiddleView>
        </div>
        <div class="right">
            <RightView></RightView>
        </div>
        <WarningDetail :show="warnDetailShow"
            :warnInfo="warnInfo"
            @close="closeWarningInfo"></WarningDetail>

        <FireTitle :item="fireInfo"></FireTitle>
    </div>
</template>
<script>
import LeftView from './LeftView';
import MiddleView from './MiddleView';
import RightView from './RightView';
import WarningDetail from '../components/WarningDetail';
import FireTitle from '../components/FireTitle';

import { mapGetters } from 'vuex';

export default {
    name: 'Home',
    components: { LeftView, MiddleView, RightView, WarningDetail, FireTitle },
    computed: {
        ...mapGetters({
            warnDetailShow: 'warnDetailShow',
            warnInfo: 'warnInfo',
            fireInfo: 'fireInfo'
        })
    },
    methods: {
        // 关闭报警详情页面
        closeWarningInfo() {
            this.$store.dispatch('warnDetailShow', false);
        }
    }
};
</script>
<style scoped>
.context {
    width: 100%;
    height: 100%;
}
.left {
    width: 25%;
    height: 100%;
    float: left;
    border-right: 1px solid #fff;
    padding-right: 1px;
}

.middle {
    width: 49.5%;
    height: 100%;
    float: left;
}

.right {
    width: 25%;
    height: 100%;
    float: left;
    padding-left: 1px;
}
</style>
